<template>
	<view class="om-font-size">
		<z-paging :default-page-size='15' ref="paging" v-model="datas" autowire-query-name="zQuery">
			<!-- 需要固定在顶部不滚动的view放在slot="top"的view中，如果需要跟着滚动，则不要设置slot="top" -->
			<template #top>
				<view class="desc-chart om-btn-color">
					<view class="allchart"><a @click="periodHandle">查询</a></view>
				</view>
			</template>
			<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
				<uni-list>
					<view :style="{backgroundColor:((touch && currentIndex == index) ?'#e5e5e5' :'white' )}"  v-for="(item,index) in datas" :key="index" @touchmove="move" @touchstart="changeBgc($event,index)" @touchend="changeBgc($event,index,item)" >
						<uni-list-item
							:title="item.formName"
							:thumb="getThumb(item)"
							:extraText="item.time"
							:showHover="false"
						>
						 <view slot="note">
							<view>表单编码：<text class="">{{item.fileCode}}</text></view>
						 </view>
						</uni-list-item>
					</view>
				</uni-list>
		</z-paging>
		<uni-popup id="popup" ref="popup" :type="'center'">
			<view class="popup-cotent padding">
				<view class="popup-item padding">
					<text class="popup-text">表单名称:</text>
					<input style="width: 65%;" maxlength="9" v-model="formName" class="uni-input" focus placeholder="请输入" />
					<uni-icons v-show="formName"  @click="clearFormName" :size="20" class="uni-icon-wrapper" color="#bbb" type="clear" />
				</view>
				<view class="popup-item padding">
					<text class="popup-text">表单编码:</text>
					<input style="width: 65%;"  class="uni-input" v-model="fileCode"  placeholder="请输入" />
					<uni-icons v-show="fileCode"  @click="clearFileCode" :size="20" class="uni-icon-wrapper" color="#bbb" type="clear" />
				</view>
				<view class="popup-item padding">
					<text class="popup-text">起始日期:</text>
					<view class="" style="width: 65%;">
						<picker mode="date" :value="startDate"  :start="getSdate" :end="getEdate" @change="bindDateChange($event,'start')">
							<view class="uni-input" v-if="startDate">{{startDate}}</view>
							<view class="uni-input" style="color: gray;" v-else>{{'请选择'}}</view>
						</picker>
					</view>
					<uni-icons v-show="startDate"  @click="clearStartDate" :size="20" class="uni-icon-wrapper" color="#bbb" type="clear" />
				</view>
				<view class="popup-item padding">
					<text class="popup-text">截止日期:</text>
					<view class="" style="width: 65%;">
						<picker mode="date" :value="startDate"  :start="getSdate" :end="getEdate" @change="bindDateChange($event,'end')">
							<view class="uni-input" v-if="endDate">{{endDate}}</view>
							<view class="uni-input" style="color: gray;" v-else>{{'请选择'}}</view>
						</picker>
					</view>
					<uni-icons v-show="endDate"  @click="clearEndDate" :size="20" class="uni-icon-wrapper" color="#bbb" type="clear" />
				</view>
				<view class="flex justify-center">
					<text  @click="searchClick" class="margin-top om-color">
						确认
					</text>
					<text   class="margin-top" @click="cancleClick" style="margin-left: 20%;">
						取消
					</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			const currentDate = this.getDate({
			     format: true
			})
			return {
				thumbs: [app.globalData.icon.going, app.globalData.icon.over,app.globalData.icon.unapprove],
				datas:[],
				touch:false,
				currentIndex:null,
				startY:null,
				isMove:false,
				searchStr:'',
				yearList:[],
				formName:'',
				fileCode:'',
				startDate:'',
				endDate:'',
			}
		},
		computed: {
			getSdate() {
				return this.getDate('start');
			},
			getEdate() {
				return this.getDate('end');
			}
		},
		methods: {
			bindDateChange(e,type){
				let _that = this
				if(type =='start'){
					_that.startDate = e.detail.value
				}else{
					_that.endDate = e.detail.value
				}
			},
			cancleClick(){
				let _that = this
				_that.$refs.popup.close()
			},
			clearEndDate(){
				let _that = this
				_that.endDate = ''
			},
			clearStartDate(){
				let _that = this
				_that.startDate = ''
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 5;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			clearFileCode(){
				let _that = this
				_that.fileCode = ''
			},
			clearFormName(){
				let _that = this
				_that.formName = ''
			},
			periodHandle(){
				let _that = this
				_that.$refs.popup.open()
			},
			getThumb(item){
				if(this.forAll){
					//#ifdef APP-PLUS
					return '/static' + item.iconName
					//#endif
					//#ifndef APP-PLUS
					return 'static' + item.iconName
					//#endif
				}else{
					if(item.fileStatus){
						if(item.fileStatus === '23556'){
							return this.thumbs[1]
						}else if(item.fileStatus === '34781')
							return this.thumbs[2]
						else{
							return this.thumbs[0]
						}
					}else{
						if(item.isover){
							return this.thumbs[1]
						}else{
							return this.thumbs[0]
						}
					}
				}
			},
			move(){
				let _that = this
				_that.isMove = true
			},
			changeBgc(e,index,item){
				let _that = this
				_that.touch = true
				_that.currentIndex = index
				if(item && item.url){
					_that.touch = false
					let strList = item.url.split('#')
					if(_that.isMove){
						_that.isMove = false
					}else{
						window.open(item.url)
					}
				}
			},
			itemClick(){
				let _that = this
			},
			searchClick(){
				let _that = this
				_that.$refs.popup.close()
				_that.$refs.paging.reload()
				_that.zQuery(1,15)
			},
			zQuery(pageNo, pageSize,str) {
				let _that = this
				// 组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
				// 这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				// 模拟请求服务器获取分页数据，请替换成自己的网络请求
				const params = {
					page:pageNo,
					rows:15,
					openid:_that.openid,
					formName:_that.formName,
					fileCode:_that.fileCode,
					startDate:_that.startDate,
					endDate:_that.endDate
				}
				uni.request({
					url:'https://zst.om909.com/wechatMp/getMessagePager.do',
					header:{
						'Content-Type':'application/x-www-form-urlencoded'
					},		
					method:'POST',
					data: params,
					success: (res) => {
						_that.$refs.paging.complete(res.data.rows);
					},
					fail:(res)=> {
						// 如果请求失败写this.$refs.paging.complete(false);
						// 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
						// 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
						_that.$refs.paging.complete(false);
					}
				})
			},
		},
		onLoad(options) {
			let _that = this
			_that.openid = options.openid 
			//_that.openid = 'oLTce1CV_FTFKFgL2dNw7-mzSZvc'
			uni.setNavigationBarTitle({
				title:'消息查询'
			})
			// _that.om.request(
			// 	'wechatMp/getMessagePager',
			// 	{
			// 		page:1,
			// 		rows:10,
			// 		openid:'oLTce1FmaHdgUFdjfdCIZ-ErIYWw'
			// 	},
			// 	'post'
			// ).then(res=>{
			// 	_that.datas = res
			// })
		}
	}
</script>

<style>
	.allchart{
		width: 100%;
		height: 100%;
	}
	.allchart a{
		float: right;
		width: 68px;
		height: 26px;
		line-height: 26px;
		text-align: center;
		color: #000;
		background-color: #fff;
		margin: 12px 15px 12px 4px;
	}
	.desc-chart{
		top: 0;
		height: 100rpx;
		/* line-height: 50px;
		padding: 0 15px; */
		font-size: 14px;
		border-bottom: #EEEEEE 1px solid;
		/* display: flex; */
		z-index: 99;
		width: 100%;
	}
 .item{
	 margin:10rpx auto;
	 position: relative;
	 display: flex;
	 flex-direction: column;
	 justify-content: space-between;
	 padding: 0rpx 30rpx;
	 border-bottom: 1px solid #eeeeee;
	 width: 95vw;
	 background-color: white;
	 padding: 30rpx;
	 border-radius: 18rpx;
 }
 .item-title{
	font-size: 35rpx;
	margin-bottom: 20rpx;
 }
 .item-content{
	 display: flex;
	 margin: 10rpx 0rpx 10rpx 0rpx;
 }
 .item-content-title{
	 color: #747474;
	 width: 30%;
 }
 .item-content-text{
	 width: 70%;
 }
 .item-bottom{
	display: flex;
	justify-content: space-between;
	height: 60rpx;
	line-height: 60rpx;
 }
 .cancel-btn{
 	text-align: center;
 	display: block;
 	color: #0081ff;
 	background-color: #cce6ff;
 	height: 36px;
 	line-height: 36px;
 	width: 72px;
 	margin: 15px auto 0;
 }
 .popup-text{
	 width: 35%;
	 height: 100%;
 }
 .popup-item{
 	height:50px;
 	background-color: #FFFF;
 	font-size: 16px;
 	/* text-align: center; */
 	border-bottom: 1px solid #EEEEEE;
 	display: flex;
 	justify-content: space-between;
	align-content: center;
 	text-align: left;
 }
</style>
